<template>
	<view>
		<topbar :settings="settings"></topbar>
		<view class="content">
			<view class='setting-wrapper'>
				<view class='setting-header' hover-class='setting-hover' >
					<image src='../../static/img/my.png' class='setting-header-icon'></image>
					<text class='setting-header-nick'>{{loginUser.name}}</text>
					<text class='setting-header-account'>账号：{{loginUser.accid}}</text>
				</view>

				<view class='setting-detail' >
					<view class='setting-item' hover-class='setting-hover' data-type='nick'>
						<text class='setting-item-left'>昵称</text>
						<text class='setting-item-right'>{{loginUser.name}}</text>
					</view>
					<view class='setting-item' hover-class='setting-hover'>
						<text class='setting-item-left'>性别</text>
						<text class='setting-item-right'
							>{{loginUser.gender == 0 ? '男' : loginUser.gender == 1 ? '女' : '未知'}}</text>
					</view>
					<picker mode="date" bindchange='dateChange'>
						<view class='setting-item'>
							<text class='setting-item-left'>生日</text>
							<text class='setting-item-right'>{{loginUser.birth}}</text>
						</view>
					</picker>
					<view class='setting-item' hover-class='setting-hover' data-type='tel'>
						<text class='setting-item-left' >手机</text>
						<text class='setting-item-right'>{{loginUser.mobile ? loginUser.mobile : '未知'}}</text>
					</view>
					<view class='setting-item' hover-class='setting-hover'>
						<text class='setting-item-left' >邮箱</text>
						<text class='setting-item-right'>{{loginUser.email ? loginUser.email : '未知'}}</text>
					</view>
					<view class='setting-item last-item' hover-class='setting-hover' >
						<text class='setting-item-left'>签名</text>
						<text class='setting-item-right'>{{loginUser.ex ? loginUser.ex : '未知'}}</text>
					</view>
				</view>
				<button class='setting-logout-btn' @click="gotoLogin()">注销</button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				settings: {
					title: '个人资料',
					backgroundColor: 'pink',
				},
				loginUser: {
					name: '',
					accid: '',
					gender: 0,
					birth: '',
					mobile: '',
					email: '',
					ex: '',
					mute:'',
					valid:''
				},
				accids: [],
			};
		},
		created() {
			this.getinfo()
		},
		methods: {
			// 退出登录
			gotoLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 获取用户信息
			async getinfo() {
				this.accids.push(this.accid)
				let datas = JSON.stringify(this.accids)
				console.log(datas)
				uni.request({
					url: 'http://118.178.241.20:8080/user/getUinfos', 
					method:"POST",
					data: {
						accids:datas
					},
					header: {
						'content-type': 'application/json'
					},
					success:(res)=> {
						console.log(res.data.data[0])
						this.loginUser = res.data.data[0]
					}
				})

			}
		},
		computed: {
			accid() {
				return this.$store.state.userinfo.accid
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		position: absolute;
		top: 180rpx;
	}

	.setting-wrapper {
		width: 100%;
		height: 100%;
		color: #000;
		padding-top: 32rpx;
		box-sizing: border-box;
	}

	.setting-hover {
		background-color: #f0f0f0 !important;
	}

	.setting-header {
		border-bottom: 1px solid #e7e7e7;
		border-top: 1px solid #e7e7e7;
		height: 170rpx;
		width: 100%;
		padding: 30rpx;
		margin-bottom: 32rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.setting-header-icon {
		display: inline-block;
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
	}

	.setting-header-nick {
		display: inline-block;
		position: absolute;
		top: 70rpx;
		left: 160rpx;
		font-size: 36rpx;
		color: #000;
	}

	.setting-header-account {
		display: inline-block;
		position: absolute;
		top: 130rpx;
		left: 160rpx;
		color: #A8A8A8;
		font-size: 28rpx;
	}

	.setting-header-arrow {
		float: right;
		margin: 42rpx 0;
		color: #aaa;
		width: 30rpx;
		height: 30rpx;
	}

	.setting-detail {
		border-bottom: 1px solid #e7e7e7;
		border-top: 1px solid #e7e7e7;
	}

	.setting-item {
		border-bottom: 1px solid rgba(220, 220, 220, 0.5);
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		margin: 0 auto;
		font-size: 32rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.setting-item-left {
		float: left;
		color: #222;
	}

	.setting-item-arrow {
		float: right;
		margin-right: 20rpx;
		color: #ccc;
		width: 30rpx;
		height: 30rpx;
		margin-top: 32rpx;
	}

	.setting-item-right {
		float: right;
		overflow: hidden;
		margin-right: 20rpx;
		max-width: 70%;
		color: #959595;
		font-size: 30rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.last-item {
		border-bottom: none;
	}

	.setting-logout-btn {
		margin: 60rpx auto 20rpx;
		width: 90%;
		background-color: #f04d64;
		border-radius: 8rpx;
		text-align: center;
		color: #fff;
	}
</style>
